<template>
	<view class="container" :style="{'height': screenHeight}">

		<view class="bg-top bg-blue">
			<view class="top-box">
				<!-- <view class="qh-title text-bold text-blue text-xl">
					<text>管理</text>
				</view> -->

				<view>
					<view>
						<u-grid :border="false">
							<u-grid-item v-for="(item,index) in baseList" :key="index">
								<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="52">
								</u-icon> -->
								<text class="color-text" :style="{color: item.color}">{{item.name}}</text>
								<text class="grid-text">{{item.title}}</text>
							</u-grid-item>
						</u-grid>
						<u-toast ref="uToast" />
					</view>
				</view>
				
			</view>
			
			<view class="top-box">
				<view class="qh-title text-bold text-blue text-xl">
					<text>{{userName}}任务分布情况</text>
				</view>
			
				<view>
					<view class="charts-box">
					  <qiun-data-charts inScrollView="true" type="pie" :chartData="chartsDataPie1"/>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { taskCount } from '@/api/task'
	import qiunDataCharts from '@/subPackTask/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components:{
			qiunDataCharts
		},
		data() {
			return {
				userName:'',
				screenHeight: '',
				baseList: [
					{
						name: '0',
						title: '进行中',
						color: '#3A91F0',
						page: '',
					},
					{
						name: '0',
						title: '已逾期',
						color: '#FF656D',
						page: '',
					},
					{
						name: '0',
						title: '已完成',
						color: '#4CA70E',
						page: '',
					},
				],
				chartsDataPie1:{
					"series": []
				},
				propertyInfo:{},
			}
		},
		onShow() {
			this.getCount()
		},
		onLoad() {
			let postNames = uni.getStorageSync("loginInfo").postNames
			if(postNames.indexOf('总经理')<0&&postNames.indexOf('副总经理')<0&&postNames.indexOf('生产经理')<0){
				this.userName = '我的'
			}
			let that = this
			uni.getSystemInfo({
				"success"(res) {
					that.screenHeight = res.screenHeight-90+'px'
				}
			})
		},
		onShareAppMessage() {
			return {
				title: '分享'
			}
		},
		methods: {
			clickIcon(type,page){
				if(type == 'gotoPage'){
					this.gotoPage(page)
				}
				if(type == 'scan'){
					this.getScan(page)
				}
			},
			// 开启扫描一、二维码
			getScan(page){
				let that = this
				uni.scanCode({
					success: function (res) {
						that.gotoPage(page+res.result)		     
					}
				})
			},
			async getCount(){
				const { data } = await taskCount();
				if(data.code == 200){
					// 头部数字
					this.baseList[0].name = data.data.jxzCount
					this.baseList[1].name = data.data.yyqCount
					this.baseList[2].name = data.data.aswcCount+data.data.yqwcCount
					// 饼图数据
					this.chartsDataPie1.series = []
					this.chartsDataPie1.series.push({
						"data": [
					    {
					    	"name": "进行中",
					    	"value": data.data.jxzCount
					    }, {
					    	"name": "已逾期",
					    	"value": data.data.yyqCount
					    },{
					    	"name": "按时完成",
					    	"value": data.data.aswcCount
					    },{
					    	"name": "逾期完成",
					    	"value": data.data.yqwcCount
					    },
					  ]
					})
				}
			},
			click(e){
				console.log('23222',e.title)
			}
		}
	}
</script>
<style lang="scss" scoped>
	
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}
	
	.color-text {
		font-size: 80rpx;
		font-weight: bold;
		color: #000000;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}
	
	.container {
		width: 750rpx;
		color: #333333;
		background-color: #f2f2f4;

		.bg-top {
			// margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 650rpx;
				background-color: #FFFFFF;
				margin: 20rpx auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}
				
				.text-bold {
					font-weight: bold;
				}
				
				.text-blue,
				.line-blue,
				.lines-blue {
					color: #0081ff;
				}
				
				.text-xl {
					font-size: 36upx;
				}

			}
		}
	}
	
	.bg-blue {
		background-color: #0081ff;
		color: #ffffff;
	}
	
</style>